<template>
  <Modal v-model="modal" :title="title" @on-cancel="onCancel">
    <div class="tag-modal">
      <Form :model="editObj" :label-width="160" ref="form" :rules="rules">
        <FormItem label="经销商:" :label-width="80" prop='dealers'>
          <p>{{editObj.distributorName}}</p>
        </FormItem>
        <FormItem label="月份:" :label-width="65" prop='month'>
          <p>{{editObj.yearmonth}}</p>
        </FormItem>
        <FormItem label="APP 抢购目标门店数:" prop="storeNumTarget">
          <InputNumber :min="0" v-model="editObj.storeNumTarget" placeholder="正整数"></InputNumber>
        </FormItem>
        <FormItem label="APP 抢购基础门店数:" prop="storeNumBase">
          <InputNumber :min="0" v-model="editObj.storeNumBase" placeholder="正整数"></InputNumber>
        </FormItem>
        <FormItem label="APP 目标抢购条数:" prop="purchNumTarget">
          <InputNumber :min="0" v-model="editObj.purchNumTarget" placeholder="正整数"></InputNumber>
        </FormItem>
      </Form>
    </div>
    <div slot="footer">
      <Button @click="cancel" size="large" type="text">取消</Button>
      <Button :disabled="btnDisabled" @click="onSave" type="primary" size="large">确定</Button>
    </div>
  </Modal>
</template>
<script>
import table from "@/table";
import { formatMonth } from "@/util";
export default {
  components: {},

  data() {
    return {
      id: null,
      modal: false,
      title: "经销商目标基础数据维护",
      rules: {
        storeNumTarget: [
          {
            required: true,
            message: "抢购目标门店数不能为空",
            type: "number",
            trigger: "change"
          }
        ],
        storeNumBase: [
          {
            required: true,
            message: "抢购基础门店不能为空",
            type: "number",
            trigger: "change"
          }
        ],
        purchNumTarget: [
          {
            required: true,
            message: "目标抢购条不能为空",
            type: "number",
            trigger: "change"
          }
        ],
       
      },
      editObj: {
        distributorName: "",
        month: "",
        storeNumTarget: "",
        storeNumBase: "",
        purchNumTarget: "",
      },
      btnDisabled: false,
      flag: false
    };
  },
  methods: {
    updateForm(row) {
      this.editObj = Object.assign(this.editObj, row)
      this.openModal()
    },
    openModal() {
      this.btnDisabled = false
      this.modal = true;
    },
    onCancel() {
      this.$refs["form"].resetFields();
      this.modal = false;
    },
    cancel() {
      this.$refs["form"].resetFields();
      this.modal = false;
    },
    onSave() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.btnDisabled) return;
          this.btnDisabled = true;
          let { distributorId, purchNumTarget, storeNumBase, storeNumTarget, yearmonth } = this.editObj
          let param = {
            distributorId, purchNumTarget, storeNumBase, storeNumTarget, yearmonth
          };
          let url = "/report/rank/target_param/update";
          this.$jsonPost(url, param).then(data => {
              this.btnDisabled = false;
              this.$Notice.success({
                title: `修改成功`
              });
              this.$emit("complete");
              this.onCancel();
            }).catch(() => {
              this.btnDisabled = false;
            });
        }
      });
    }
  }
};
</script>